<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="queryParams.name" placeholder="首页板块"></el-input>
        </el-form-item>




        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="add()">新增</el-button>
        </el-form-item>


      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="indexTypePageData" style="width: 100%" border>
        <el-table-column prop="name" label="首页板块名称" align="center" />
        <el-table-column prop="typeId" label="模块id" align="center" />
        <el-table-column prop="showNum" label="显示数量" align="center" />
        <el-table-column label="显示类型">
          <template #default="scope">
            <!-- 内容分类 1:机构 2:艺术家 3:艺术品 4:文章 5:图片 -->
            <span v-if="scope.row.type === 1">
              机构
            </span>
            <span v-if="scope.row.type === 2">
              艺术家
            </span>
            <span v-if="scope.row.type === 3">
              艺术品
            </span>
            <span v-if="scope.row.type === 4">
              文章
            </span>
            <span v-if="scope.row.type === 5">
              图片
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="160px">
        <el-form-item label="首页板块名称">
          <el-input v-model="editForm.name" />
        </el-form-item>

        <el-form-item label="显示类型名称">
          <el-select v-model="<number>editForm.type">
            <el-option label="机构" :value="1"></el-option>
            <el-option label="艺术家" :value="2"></el-option>
            <el-option label="艺术品" :value="3"></el-option>
            <el-option label="文章" :value="4"></el-option>
            <el-option label="图片" :value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="首页显示数量">
          <el-input-number v-model="<number>editForm.showNum" :min="1" :max="999" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="<number>editForm.sort" :min="1" :max="999" />
        </el-form-item>


      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import IndexTypesAPI from "@/api/indexType";

import {

  IndexTypeForm,
  IndexType,
  IndexTypeQuery,
  IndexTypePageVO
} from "@/api/indexType/model";

defineOptions({
  name: "IndexType",
  inheritAttrs: false,
});



const queryFormRef = ref(ElForm);


const editForm = reactive<IndexTypeForm>({

});

const loading = ref(false);
const editDialogVisible = ref(false);


const total = ref(0);
// 搜索参数
const queryParams = reactive<IndexTypeQuery>({
  pageNum: 1,
  pageSize: 10,
  name: '',
});

const indexTypePageData = ref<IndexTypePageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.createUser = null;
  editForm.createTime = null;
  editForm.updateTime = null;
  editForm.sort = null;
  editForm.typeId = null
  // 名称
  editForm.name = ""
  // 首页显示数量
  editForm.showNum = 0
  // 显示类型
  editForm.type = null
  dialog.visible = true;
}
/**
 * 打开修改弹框
 * @param row 
 */
function handleEdit(row: IndexType) {
  editForm.id = row.id;
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  // 名称
  editForm.name = row.name
  // 首页显示数量
  editForm.showNum = row.showNum
  // 显示类型
  editForm.type = row.type
  editForm.sort = row.sort
  dialog.visible = true;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  IndexTypesAPI.getPage(queryParams)
    .then((data) => {
      indexTypePageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.id) {
    IndexTypesAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    IndexTypesAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}

function handleDelete(row: IndexType) {
  // 执行删除操作
  IndexTypesAPI.delete(row).then(() => {
    ElMessage.success("删除成功");
    handleQuery();
  })
}









onMounted(() => {
  handleQuery();
});
</script>
